import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    // View本身就是一个弹性盒子，因此不用再display:flex了
    <View style={[styles.container,styles.bg]}>
      <Text style={styles.txtColor}>
        {/* Text文本只能继承父元素的样式，不能继承再外层View的样式了 */}
        <Text>Hello World呀呀呀呀呀呀</Text>
        <Text>Hello World呀呀呀呀呀呀</Text>
      </Text>
      {/* <Text style={styles.txtColor}>Hello World呀呀呀呀呀呀</Text> */}
      <StatusBar style="auto" />
    </View>
  );
}
// StyleSheet.create({})一个文件可以有多个create，命名也可以变化，
// 不同样式应用到同一个元素上时后者会覆盖前者,多个样式书写的时候这么写来{[styles.container,styles.bg]}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',//和C3中相反，默认主轴方向是纵向的，C3中是横向的
  },
  bg:{
    backgroundColor: '#fdc',
  },
  txtColor:{
    color:'#f00',
    // 默认宽高都可以不带单位，自己会默认单位bp
    fontSize:32
  }
});
